<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>23.百度音乐全选案例</title>
		<style>
			* {
				margin: 0;
				padding: 0;
				border: 0;
				list-style: none;
			}
			
			.clearfix:before,
			.clearfix:after {
				display: table;
				content: '';
			}
			
			.clearfix:after {
				clear: both;
			}
			
			.clearfix {
				*zoom: 1;
			}
			
			.wrap {
				width: 764px;
				height: 800px;
				margin: 0 auto;
				position: relative;
				background: url(./images/baiduMusic/bg.png) no-repeat center center;
				overflow: hidden;
			}
			
			.baidu {
				width: 480px;
				height: 300px;
				background: #fff url(./images/baiduMusic/logo.png) no-repeat center center;
				margin: 100px auto;
				border-radius: 5px;
				box-shadow: 2px 2px 3px rgba(0, 0, 0, .3);
			}
			
			#list {
				width: 100%;
				background: rgba(255, 255, 255, .9);
				border-radius: 5px;
				padding: 19px 0;
			}
			
			#list li {
				height: 36px;
				padding: 0 30px;
				box-sizing: border-box;
				color: #000000;
			}
			
			#list li div,
			.select .selectAll {
				float: left;
				width: 12px;
				height: 12px;
				-border: 1px solid #cacaca;
				position: relative;
				top: 11px;
				margin-right: 20px;
				font: 14px/12px arial;
				cursor: pointer;
			}
			
			#list li span {
				height: 100%;
				font: 14px/36px "微软雅黑";
			}
			
			#list li span:nth-of-type(1) {
				float: left;
			}
			
			#list li span:nth-of-type(2) {
				float: right;
			}
			
			.select {
				width: 100%;
				height: 46px;
				background: #e15671;
				box-sizing: border-box;
				padding: 0 30px;
				font: 14px/46px "微软雅黑";
				color: #eee;
				border-radius: 0 0 5px 5px;
			}
			
			.select .selectAll {
				top: 16px;
				position: relative;
			}
			
			.select .selectAll span {
				position: absolute;
				top: 0px;
				right: -48px;
				cursor: pointer;
			}
			
			.select .selectAll:hover {
				color: #fff;
			}
			
			.select div {
				float: right;
				height: 100%;
				width: 300px;
			}
			
			.select div span {
				display: inline-block;
				height: 100%;
				margin-right: 42px;
			}
			
			.select div span:nth-child(3) {
				margin: 0;
			}
			
			.select div span em {
				display: inline-block;
				width: 24px;
				height: 20px;
				background: url(./images/baiduMusic/1.png) no-repeat;
				margin-right: 10px;
				position: relative;
				top: 5px;
			}
			
			.select div span:nth-of-type(1) em {
				background-position: 0 0;
			}
			
			.select div span:nth-of-type(2) em {
				background-position: 0 -21px;
				height: 24px;
				top: 6px;
			}
			
			.select div span:nth-of-type(3) em {
				background-position: 0 -46px;
				height: 24px;
			}
		</style>
		<script>
			/**
				1. 隔行变色 %
				2. 绑定鼠标移入事件处理
					移入的元素background为yellow
				3. 绑定鼠标移出事件处理
					如果 当下的input被选中
						依然保持background为yellow
					否则
						还原之前移动隔行变色的颜色
				4. 点击全选
					如果 全选选中
						所有的button都被选中，并且background为yellow
					否则
						所有的button都不被选中，并且background为还原回隔行变色的颜色
				5. 点击单选
					利用计数的方式，如果每一个checkbox都选中，则加一
					如果 计的总数和checkbox总数相同
						全选选中
					否则
						全选不选中
			*/
			window.onload = function () {
				// 获取元素
				var oList = document.querySelectorAll("#list")[0];
				// console.log(oList);
				var aLi = oList.getElementsByTagName("li");
				// console.log(aLi.length);
				// 获取li下所有的input输入框
				var aCheckboxs = oList.querySelectorAll("input");
				// console.log(aCheckboxs.length);
				// 一个存颜色的数组
				var aColors = ['#fff', '#f00'];
				// 获取全选按钮元素
				var oSelectAll = document.getElementById("selectAll");
				// 计数
				var iNum = 0;
				// li的长度
				var oLen = aLi.length;
				
				// 隔行变色 奇数行 - #fff(白色) 偶数行 - #f00(红色)
				// 传统做法
				/** for ( var i = 0; i < oLen; i++ ) {
					// 奇数行
					if ( i % 2 == 0 ) aLi[i].style["backgroundColor"] = '#fff';
					// 偶数行
					else aLi[i]["style"].backgroundColor = '#f00';
				} */
				
				// 取模%的做法
				for ( var i = 0; i < oLen; i++ ) {
					// 这里添加一个自定义索引值，作用是用来记录当前是第几个li
					aLi[i].index = i;
					
					// 初始化隔行变色
					aLi[i]["style"]["backgroundColor"] = aColors[i % aColors.length];
							
					// 绑定li的鼠标移入事件
					aLi[i].addEventListener ("mouseover", function () {
						this.style["backgroundColor"] = 'yellow';
					}, false);
					
					// 给li绑定鼠标移出事件
					aLi[i].addEventListener ("mouseout", function () {
						// 获取li下所有的input输入框
						var aInputBtn = this.querySelectorAll("input")[0];
						// 如果是哪个没有选中就哪个恢复初始颜色
						if ( !aInputBtn.checked ) {
							this["style"]["backgroundColor"] = aColors[this.index % aColors.length];	
						}
					}, false);
					
					// 点击单选
					aCheckboxs[i].addEventListener ("click", function () {
						// 每次点击之前将计数器重置下，防止计算出错
						iNum = 0;
						for ( var i = 0; i < oLen; i++ ) {
							if ( aCheckboxs[i].checked ) {
								iNum++;	
							}	
						}
						
						// 打印结果是正确的
						console.log(iNum);
						
						// 全选
						/** if ( iNum == oLen ) {
							oSelectAll.checked = true;			
						} else {
							oSelectAll.checked = false;	
						} */
						
						// 简便写法
						oSelectAll.checked = (iNum == oLen);
					}, false);
				}
				
				// 点击全选、全不选
				oSelectAll.addEventListener ("click", function () {
					for ( var i = 0; i < oLen; i++ ) {
						/** if ( this.checked ) {
							aLi[i].style.backgroundColor = 'yellow';
							aCheckboxs[i].checked = true;
						} else {
							aLi[i].style.backgroundColor = aColors[i % aColors.length];
							aCheckboxs[i].checked = false;
						} */
						
						// 下面简化下呗，全选你选中我就全部给你选中，你不选中我就全部给你不选中
						aCheckboxs[i].checked = this.checked;
						/** if ( this.checked ) {
							aLi[i].style.backgroundColor = 'yellow';
						} else {
							aLi[i].style.backgroundColor = aColors[i % aColors.length];
						}*/
						// 三目运算吊炸天的写法
						this.checked ? aLi[i].style.backgroundColor = 'yellow' : aLi[i].style.backgroundColor = aColors[i % aColors.length];
					}
				}, false);
			};
		</script>
	</head>
	<body>
		<div class="wrap">
			<div class="baidu">
				<ul id="list">
					<li>
						<div><input type="checkbox" /></div>
						<span>泡沫</span>
						<span>邓紫棋</span>
					</li>
					<li>
						<div><input type="checkbox" /></div>
						<span>说爱你</span>
						<span>蔡依林</span>
					</li>
					<li>
						<div><input type="checkbox" /></div>
						<span>稻香</span>
						<span>周杰伦</span>
					</li>
					<li>
						<div><input type="checkbox" /></div>
						<span>我的梦</span>
						<span>张靓颖</span>
					</li>
					<li>
						<div><input type="checkbox" /></div>
						<span>怎么说我不爱你</span>
						<span>萧敬腾</span>
					</li>
					<li>
						<div><input type="checkbox" /></div>
						<span>无处安放</span>
						<span>白若溪</span>
					</li>
				</ul>
				<div class="select">
					<span class="selectAll">
						<input type="checkbox" id="selectAll" />
						<span>
						全选
						</span>
					</span>
					<div class="others">
						<span><em></em>收藏</span>
						<span><em></em>添加</span>
						<span><em></em>删除</span>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>